<template>
  <div class="goods-info">
    <!-- 商品展示图 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swiper :imgList="goodsinfo.album"></swiper>
        </div>
      </div>
    </div>

    <!-- 购物车小球动画 -->
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-show="ballFlag" ref="ball"></div>
    </transition>

    <!-- 商品购买区域 -->
    <div class="mui-card">
      <div class="mui-card-header">{{ goodsinfo.name }}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            定价：<span>¥{{ goodsinfo.price }}</span>
          </p>
          <div v-if="goodsinfo.num">
            <p class="go-num">
              购买数量
              <numbox @count="countChange" :max="goodsinfo.num" initcount="1" :goodsid="goodsinfo.id"></numbox>
            </p>
            <p class="go-buy">
              <mt-button type="primary" size="small" @click="buy">立即购买</mt-button>
              <mt-button type="danger" size="small" @click="addShopcart">加入购物车</mt-button>
            </p>
          </div>
          <div v-else>该商品暂时无货</div>
        </div>
      </div>
    </div>

    <!-- 商品参数区域 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品卖点：{{ goodsinfo.sell_point }}</p>
          <p>库存情况：{{ goodsinfo.num }}件</p>
          <p>上架时间：{{ goodsinfo.create_time }}</p>
        </div>
      </div>
      <div class="mui-card-header">商品详情</div>
      <div class="good-desc">
        <div class="content" v-html="goodsinfo.content"></div>
      </div>
    </div>
  </div>
</template>

<script>
import swiper from '../../components/swiper.vue';
import numbox from '../../components/numbox.vue';

export default {
  props: ['id'],
  data() {
    return {
      goodsinfo: {},     // 获取到的商品信息
      selectedCount: 1,  // 保存商品数量，默认是1
      ballFlag: false,   // 控制小球的显示和隐藏
    };
  },
  components: {
    swiper, // 注册 swiper 组件
    numbox, // 注册 numbox 组件
  },
  created() {
    this.getGoodsInfo();
  },
  methods: {
    getGoodsInfo() {
      // 打开加载指示器
      this.$indicator.open({
        text: '加载中'
      });

      // 设置请求参数
      let params = { id: this.id };

      // 发起请求
      this.$http.get('goodsinfo', { params: params }).then(res => {
        // 关闭加载指示器
        this.$indicator.close();

        // 处理返回的数据
        if (res.data.code === 0) {
          this.$toast(res.data.msg); // 显示提示信息
        } else if (res.data.code === 1) {
          if (res.data.data) {
            this.goodsinfo = res.data.data; // 保存商品信息
          } else {
            // 商品不存在时弹出提示框，并返回上一页
            this.$messagebox.alert('商品不存在').then(() => {
              this.$router.go(-1);
            });
          }
        } else {
          this.$toast('加载失败，服务器异常'); // 显示错误提示
        }
      }).catch(error => {
        // 关闭加载指示器
        this.$indicator.close();

        // 处理请求错误
        window.console.error('请求商品详情失败:', error);
      });
    },
    // 处理数量变化事件
    countChange(goodsinfo) {
      this.selectedCount = goodsinfo.count; // 保存商品数量
      window.console.log('当前购买数量:', this.selectedCount);
    },
    // 小球动画-进入前
    beforeEnter(el) {
      el.style.transform = 'translate(0, 0)'; // 设置小球的初始位置
    },
    // 小球动画-进入
    enter(el, done) {
      el.offsetWidth; // 触发重绘，确保动画生效
      // 获取小球在页面中的位置
      const ballPosition = this.$refs.ball.getBoundingClientRect();
      // 获取徽标在页面中的位置
      const badgePosition = document.getElementById('badge').getBoundingClientRect();
      // 计算小球需要移动的距离
      const xDist = badgePosition.left - ballPosition.left;
      const yDist = badgePosition.top - ballPosition.top;
      // 设置小球的最终位置
      el.style.transform = `translate(${xDist}px, ${yDist}px)`;
      // 设置动画过渡效果
      el.style.transition = 'all .5s cubic-bezier(.4, -0.3, 1, .68)';
      done(); // 调用 done 表示动画结束
    },
    // 小球动画-进入后
    afterEnter() {
      this.ballFlag = !this.ballFlag; // 动画结束后隐藏小球
    },
    // 加入购物车
    addShopcart() {
      this.ballFlag = !this.ballFlag; // 显示小球
      this.$store.commit('shopcart/addCar', {
        id: this.id,
        count: this.selectedCount,
        selected: true
      });
      this.$toast('商品已加入购物车'); // 提示用户商品已加入购物车
    },
    // 立即购买
    buy() {
      // 将当前商品设为要购买的商品
      this.$store.commit('shopcart/setBuy', { id: this.$props.id, count: this.selectedCount });
      // 跳转到创建订单页面
      this.$router.push({ name: 'order_create' });
    }
  }
};
</script>

<style lang="scss" scoped>
.goods-info {
  background: #f1f1ff;
  overflow: hidden;

  .price {
    span {
      color: red;
      font-size: 14px;
      font-weight: bold;
    }
  }

  .go-num {
    display: flex;
    align-items: center;
    margin: 10px 0;

    div {
      margin-left: 10px;
    }
  }

  .go-buy {
    display: flex;
    margin: 10px 0 0px;
    justify-content: center;

    button {
      margin: 0 5px;
    }
  }

  .good-desc {
    background: #fff;
    padding: 5px;

    h3 {
      font-size: 16px;
      color: #226aff;
      text-align: center;
      margin: 15px 0;
    }

    .content {
      font-size: 14px;
      line-height: 28px;

      img {
        width: 100%;
      }
    }
  }

  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%; // 设置为圆形
    position: absolute; // 绝对定位
    background: red; // 背景颜色为红色
    z-index: 99; // 设置层级
    left: 132px; // 距离左侧 132px
    top: 390px; // 距离顶部 390px
    transform: translate(93px, 230px); // 初始位置偏移
  }
}
</style>